// // DOMContentLoaded -> 只会等待dom树加载完成后就会触发
// // load -> 所有资源加载完成后才会触发
// document.addEventListener('DOMContentLoaded', async () => {
//   // 获取学生统计数据
//   // 需求: 如果遇到了token不存在或者token失效(假的/错误的)
//   // 希望, 直接给我跳转到登录页, 如何处理
//   const res = await axios.get('/dashboard')
//   console.log('----index.js中的学生数据统计', res);
// })

document.addEventListener('DOMContentLoaded', async () => {
  const { data } = await axios.get('/dashboard')
  console.log(data);
  for (const key in data.overview) {
    document.querySelector(`[name=${key}]`).innerHTML = data.overview[key]
  }

  initYearChart(data.year)
  initSalaryPieChart(data.salaryData)
  initSalaryLineChart(data.groupData)
  initSalaryGenderChart(data.salaryData)
})

const initYearChart = (year) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('line'))

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '2021全学科薪资走势',
      left: 10,
      top: 15,
      textStyle: {
        fontSize: 16,
      },
    },
    xAxis: {
      type: 'category',
      data: year.map((item) => item.month),
      axisLine: {
        show: true,
        lineStyle: {
          color: 'green',
          type: 'dashed'
        }
      },
      axisLabel: {
        show: true,
        color: 'red'
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: ['#ccc']
        }
      }
    },
    grid: {
      left: '10%',
      top: '20%',
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#4e94ee',
          },
          {
            offset: 1,
            color: '#5a7cf0',
          },
        ]
      }
    ],
    series: [
      {
        data: year.map((item) => item.salary),
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          width: 5,
        },
        areaStyle: {
          color:
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#4f93ee',
              },
              {
                offset: 0.8,
                color: 'rgba(255,255,255,0.1)',
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)',
              },
            ]
          }
        }
      },
    ],
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
const initSalaryPieChart = (salaryData) => {
  const myChart = echarts.init(document.getElementById('salary'))
  const option = {
    title: {
      text: '班级薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A', '#ee6666'],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['50%', '65%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: false,
        //     fontSize: '40',
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: false//刻度线
        },
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' }
        // ]
        data: salaryData.map((item) => {
          return {
            value: item.g_count + item.b_count,
            name: item.label
          }
        })
      }
    ]
  };

  myChart.setOption(option)
}
const initSalaryLineChart = (groupData) => {
  console.log(groupData[1])

  const myChart = echarts.init(document.getElementById('lines'))
  const option = {
    xAxis: {
      type: 'category',
      data: groupData[1].map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#43e9ad',
          },
          {
            offset: 1,
            color: '#b6f7e0',
          },
        ]
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#5cb3ff',
          },
          {
            offset: 1,
            color: '#aedaff',
          },
        ]
      }
    ],
    series: [
      {
        data: groupData[1].map(item => item.hope_salary),
        type: 'bar'
      },
      {
        data: groupData[1].map(item => item.salary),

        type: 'bar'
      }
    ]
  }

  //   找对象
  //   注册事件
  //   事件委托移除类名
  const btns = document.querySelector('#btns')
  btns.addEventListener('click', (e) => {
    // console.log(e.target.tagName)
    if (e.target.tagName === 'BUTTON') {
      // ?.可选操作符
      document.querySelector('.btn-blue')?.classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      // 由于数组没有下标所以通过innerHTML/innerTXT获取组号
      const group = e.target.innerText
      option.xAxis.data = groupData[group].map((item) => item.name)
      option.series[0].data = groupData[group].map((item) => item.hope_salary)
      option.series[1].data = groupData[group].map((item) => item.salary)
      myChart.setOption(option)

    }
  })
}
// ——————————————男女薪资分布图——————————————————
const initSalaryGenderChart = (salaryData) => {
  const myChart = echarts.init(document.getElementById('gender'))
  const option = {
    title: [
      {
        text: '男女薪资分布',
        left: 10,
        top: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: '男生',
        left: '50%',
        top: '45%',
        textAlign: 'center',
        textStyle: {
          fontSize: 12,
        },
      },
      {
        text: '女生',
        left: '50%',
        top: '85%',
        textAlign: 'center',
        textStyle: {
          fontSize: 12,
        },
      },
    ],
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['20%', '30%'],
        center: ['50%', '30%'],
        data: salaryData.map((item) => ({ name: item.label, value: item.b_count })),
      },
      {
        type: 'pie',
        radius: ['20%', '30%'],
        center: ['50%', '70%'],
        data: salaryData.map((item) => ({ name: item.label, value: item.g_count })),
      }
    ],
  };
  myChart.setOption(option)

}